<template>
	<scroll-view scroll-y="true" style="height: 100vh;">
		<view class="header"></view>
		<view class="content">
			<view class="content-item">
				<view class="content-title">
					<text>我的邀请</text>
				</view>
				<view class="income-code">
					我的邀请码：{{userinfo.recommend_id}}
					<text class="text-line" @tap="copyshare">复制</text>
				</view>

				<view class="income-recode">
					<view class="recode-box">
						<view class="font-bigs">{{apprenticeInfo.friendEffective.today}}</view>
						<view>今日邀请(人)</view>
					</view>

					<view class="recode-box">
						<view class="font-bigs">{{apprenticeInfo.friendEffective.total}}</view>
						<view>总邀请(人)</view>
					</view>

					<view class="recode-box">
						<view class="font-bigs">{{apprenticeInfo.aDays.count}}</view>
						<view>今日奖励(元)</view>
					</view>

					<view class="recode-box">
						<view class="font-bigs">{{apprenticeInfo.aDays.all_count}}</view> 
						<view>总奖励(元)</view>
					</view>
				</view>

				<view class="yaoqinghaoyou" @tap="shareshows">
					<text>立即邀请赚钱</text>
				</view>
			</view>

			<view class="content-item">
				<view class="content-title">
					<text>邀请简单三步</text>
				</view>
				<view class="invitat">
					<view class="invitat-icon">
						<image src="/static/image/yq1.png" class="icon-img" mode="aspectFit"></image>
						<image src="/static/image/jiantou.png" class="jiantou-img" mode="aspectFit"></image>
						<image src="/static/image/yq2.png" class="icon-img" mode="aspectFit"></image>
						<image src="/static/image/jiantou.png" class="jiantou-img" mode="aspectFit"></image>
						<image src="/static/image/yq3.png" class="icon-img" mode="aspectFit"></image>
					</view>
				</view>
				<view class="invitat">
					<view class="invitat-box">
						<view class="invitat-index">1</view>
						<text>分享好友</text>
					</view>
					<view class="invitat-box">
						<view class="invitat-index">2</view>
						<text>好友下载APP</text>
					</view>
					<view class="invitat-box">
						<view class="invitat-index">3</view>
						<text>红包入账</text>
					</view>
				</view>
			</view>

			<view class="content-item">
				<view class="content-title">
					<text>邀请小技巧</text>
				</view>
				<!-- <view class="skill">{{invite}}</view> -->
				<jyf-parser :html="invite" class="skill"></jyf-parser>
			</view>
		</view>

		<!--邀请好友-->
		<view class="share" v-if="showShare" >
			<!-- <view style="width: 100%;height: 200rpx;color: #fff;">1111111</view> -->
			<scroll-view scroll-y="true" class="fiximg" :style='{height:autoheight+"px"}' >
				<image :src="shareimg" mode="widthFix"></image>
			</scroll-view>
			
			<view class="invitebox" :class="[animation?'moves':'selectedmove']">
				<view class="invitebutton">
					<view class="share-item" @click="sharequn">
						<image src="/static/image/friend.png"></image>
						<text>分享朋友</text>
					</view>
					<view class="share-item" @click="saveimages">
						<image src="/static/image/friendsave.png"></image>
						<text>保存图片</text>
					</view>
					
					<view class="share-item" @click="shareposter">
						<image src="/static/image/quan.png"></image>
						<text>朋友圈</text>
					</view>
				</view>
				
				<view class="cancelshare" @click="hiddenshow">取消</view>
			</view>
			
			
		</view>
		<view @click="hiddenshow" @touchmove.stop.prevent="clear"  class="marsk" :class="[animation?'opacitytest':'']" v-if="showShare"></view>
	</scroll-view>
</template>
<script>
	export default {
		data() {
			return {
				shareinfo:'',//分享数据 
				autoheight:1080,
				shareimg:'',//分享海报
				showShare: false,
				animation: false,
				userinfo: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				apprenticeInfo: {
					"friendEffective":{
						"total": 0,
						"today": 0,
					},
					"friend": {
						"total": 0,
						"today": 0,
						"yesterday": 0
					},
					total: {
						amount: "0.00",
						multiple: "0.00",
						threshold: "0.00"
					},
					aDays: {
						count: "0.00",
						level1: "0.00",
						level2: "0.00",
						people: "0"
					},
					myInvite: {
						avatar: '',
						nickname: '',
						commission: 0,
						countPromote: 0,
					}
				},
				invite:getApp().globalData.ruleconfig.invite
			}
		},
		//监听右上角事件
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:"/pages/article/index?key=apprenticeContribution"
			})
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('user_info');
			this.initdata();
			let sys = uni.getSystemInfoSync();
			this.autoheight = sys.screenHeight-260
			console.log(sys.screenHeight);
		},
		methods: {
			//保存图片
			saveimages() {
				let _this = this
				uni.downloadFile({
					url: _this.shareimg,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(ret) {
								_this.$ShowMsg('图片保存相册成功！');
								console.log(ret);
							}
						})
					}
				})
			},
			clear(){
				
			},
			initdata() {
				this.$HttRequest({
					url: '/promote/income',
					param: ''
				}).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.apprenticeInfo = res.data
					} else {
						this.$ShowMsg(res.message)
					}

				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error)

				});
			},

			scroll(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop;
			},
			shareshows() {
				this.showShare = true;
				//console.log(this.shareimg); 
				if(!this.shareimg){
					this.$HttRequest({
						url: '/promote/shareImg',
						param: ''
					},'GET',true).then((res) => {
						console.log(res)
						if (res.status === 10000) {
							this.shareimg = res.data.imgUrl
							this.shareinfo = res.data
						} else {
							this.$ShowMsg(res.message)
						}
					}).catch((error) => {
						//异常错误
						this.$ShowMsg('statusCode：' + error.errMsg);
					})
				}
				this.$nextTick(function() {
					setTimeout(() => {
						this.animation = true;
						//震动提醒
						//uni.vibrateShort();
					}, 100)
				})
			},
			copyshare() {
				let _this = this; 
				let copyStrings = '我正在“天天有礼”领取红包，复制我的邀请码【'+this.userinfo.recommend_id+'】下载“天天有礼”APP，我们一起来赚钱吧！'
				uni.setClipboardData({
					data: copyStrings,
					success: function() {
						
					}
				})
			},
			hiddenshow() {
				//关闭时先播放完动画再隐藏
				this.animation = false;
				this.$nextTick(function() {
					setTimeout(() => {
						this.showShare = false;
					}, 100)
				})
			},
			//分享朋友或群
			sharequn() {
				let _this = this;
				let nickname = _this.userinfo.nickname;
				if(nickname.length>=4){
					nickname = nickname.substring(0,4)+'...'
				}
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: _this.shareinfo.url,
					title: _this.shareinfo.sTitle,
					summary: _this.shareinfo.sDescribe,
					imageUrl: _this.shareinfo.sImage, 
					success: function(res) {
						_this.$ShowMsg('分享朋友朋友或群成功！')
					},
					fail: function(err) {
						console.log(err);
						_this.$ShowMsg('分享朋友失败！')
					}
				});
			},
			//分享到朋友圈
			shareposter() {
				let _this = this;
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 2,
					imageUrl: _this.shareimg,
					success: function(res) {
						_this.$ShowMsg('分享朋友圈成功！')
					},
					fail: function(err) {
						console.log(err);
						_this.$ShowMsg('分享朋友圈失败！')
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: #ff562f;
	}

	.font-bigs {
		font-size: 45rpx;
		font-weight: bold;
		color: #363636;
	}

	.header {
		width: 100vw;
		height: 424rpx;
		background-image: url(../../static/image/income-top.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.content {
		width: 100vw;
		height: auto;
		position: absolute;
		top: 425rpx;
		z-index: 10;

		.content-item {
			width: 95%;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 0 auto;
			margin-bottom: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 5rpx 10rpx 8rpx #d23510;
		
			//邀请技巧
			.skill {
				padding: 0 30rpx;
				padding-bottom: 30rpx;
			}

			.invitat {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 20rpx 0;
				margin-bottom: 40rpx;
				.invitat-box {
					margin: 0 20rpx;
					display: flex;
					font-size: 24rpx;
					justify-content: center;
					align-items: center;
					color: #7d7d7d;
					margin-bottom: 10rpx;
					.invitat-index {
						margin-right: 10rpx;
						font-size: 25rpx;
						width: 30rpx;
						height: 30rpx;
						color: #fff;
						background-color: #f7b500;
						border: 11rpx solid #fce199;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.invitat-icon {
					display: flex;
					justify-content: center;
					align-items: center;

					.jiantou-img {
						width: 23rpx;
						height: 22rpx;
						margin: 0 40rpx;
					}

					.icon-img {
						width: 144rpx;
						height: 144rpx;
					}
				}
			}

			.content-title {
				background-image: url('/static/image/income-title.png');
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 35rpx;
				width: 383rpx;
				height: 77rpx;
				background-repeat: no-repeat;
				background-size: cover;
				margin: 30rpx 0;
			}

			.income-code {
				background-color: #6990d5;
				padding: 0 30rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 30rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;

				.text-line {
					text-decoration: underline;
					margin-left: 10rpx;
				}
			}

			//邀请记录
			.income-recode {
				width: 68%;
				margin: 10rpx auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.recode-box {
					font-size: 28rpx;
					color: #7d7d7d;
					margin: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}

			//邀请好友
			.yaoqinghaoyou {
				width: 423rpx;
				height: 105rpx;
				background-image: url(../../static/image/income-botton.png);
				background-repeat: no-repeat;
				background-size: cover;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20rpx auto;
				margin-bottom: 35rpx;

				text {
					font-size: 38rpx;
					color: #fff;
					letter-spacing: 2rpx;
				}
			}
		}
	}

	//遮罩层
	.marsk {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition-property: opacity;
		transition-duration: 0.2s;
		opacity: 0;
		z-index: 990;
		background-color: #000;
	}

	.opacitytest {
		opacity: 0.5;
	}

	.moves {
		transform: translateY(0);
	}

	.selectedmove {
		transform: translateY(350rpx);
	}

	.share-botton {
		font-weight: bold;
		width: 80%;
		margin: 0 auto;
		height: 120rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		font-size: 32rpx;
	}

	.yaoqing {
		margin-right: 15rpx;
	}

	.share-left {
		display: flex;
		flex-direction: column;
		color: #bc5300;
		background-color: #fdd2b0;
		justify-content: center;
		align-items: center;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		flex: 2;
	}

	.share-right {
		flex: 3;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #0f8cfa;
		font-size: 35rpx;
	}

	.copybg {
		background-color: #fd8425;
		font-size: 25rpx;
		color: #fff;
		border-radius: 10rpx;
		width: 75rpx;
		text-align: center;
	}

	.share-code {
		width: 80%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/*分享操作*/
	.share {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		position: fixed;
		display: flex;
		justify-content: flex-start;
		align-items: center;	
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		z-index: 999;
		
		.fiximg {
			// border: 1rpx solid #000;
			margin-top: 50rpx;
			width: 90%;
			width: 600rpx;
			// border: 1rpx solid #F0AD4E;
			// background-color: #e6e6e6;
			image {
				width: 600rpx;
				
			}
		}
		.invitebox{
			transition-property: transform;
			transition-duration: 0.1s;
			transition-timing-function: cubic-bezier(.5, .49, .57, 1.21);
			width: 100%;
			height: 350rpx;
			background-color: #fff;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			
			.cancelshare{
				display: flex;
				justify-content: center;
				align-items: center;
				
				width: 80%;
				height: 80rpx;
				font-size: 32rpx;
				border-top: 1rpx solid #e4e4e4;
				padding-top: 10rpx;
				color: #d2d1d1;
				
			}
			
			.invitebutton{
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-bottom: 20rpx;
				.share-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					image{
						height: 110rpx;
						width: 110rpx;
						margin-bottom: 20rpx;
					}
					text{
						color: #303030;
						font-size: 28rpx;
						margin-bottom: 15rpx;
					}
				}
			}
			
		}
		
	}

	

</style>
